<template>
  <el-row class="bannerEdit">
    <el-popover v-model="moveVisible" placement="top" width="320">
      <div>请选择要交换的Banner</div>
      <el-table :show-header="false" :data="allBanner" style="width: 100%;">
        <el-table-column prop="number">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column prop="config" width="50">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="index === scope.$index"
              @click="changeBanner(index, scope.$index)"
            >
              交换
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin: 0;">
        <el-button size="mini" type="text" @click="moveVisible = false">
          取消
        </el-button>
      </div>
      <el-button slot="reference" type="text" class="button">
        移动
      </el-button>
    </el-popover>
    <el-button
      type="text"
      class="button button--delete"
      @click="$emit('deleteBanner', index)"
    >
      删除
    </el-button>
  </el-row>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    allBanner: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      moveVisible: false
    }
  },
  methods: {
    changeBanner(index1, index2) {
      this.$emit('changeBanner', index1, index2)
      this.moveVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.bannerEdit {
  @include flexCenter($jc: flex-end);
}
button {
  padding: 0;
}
.button--delete {
  margin-left: 4px;
  color: #999;
}
</style>
